* {
    margin: 0;
    padding: 0;
}
.nav-bar {
    width: 980px;
    height: 410px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#container{
    margin-left: 60px;
    margin-top: 70px;
    position: relative;
    width: 840px;
    height: 410px;
    overflow: hidden;
}
.nav-bar-container{
    width: 4200px;
    height: 300px;
    list-style: none;
    display: block;
    position: absolute;
    left: -840px;
    top: 0px;
    z-index: 3;
}
.nav-bar-container li{
    float: left;
    width: 120px;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 50px;
}



.nav-bar-container img{
    width: 100%;
}
.active{
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s; /* Firefox 4 */
    -webkit-transition-duration: 0.5s; /* Safari 和 Chrome */
    -o-transition-duration: 0.5s; /* Opera */ 
}
.nav-bar-container li:hover{
   transform: scale(1.8);
}
.mybutton{
    position: absolute;
    z-index: 3;
    top: 0px;
}
.mybutton img{
    width: 100%;
}
#left_button{
    top:180px;
    left: 30px; 
}
#right_button{
    top:180px;
    right: 30px; 
}